<script setup>
import Tag from '@/components/tag/index.vue'
import ButtonX from '@/components/button-x/index.vue'


const props = defineProps({
  level: {
    type: String,
    default: 'warn', // second-次要预警 general-一般预警 warn-重要预警
  },
  warnTitle: String,
  warnMessage: String,
})
const emit = defineEmits(['btnClick'])
const currWarn = computed(() => ({
  warn: {
    icon: 'warn-important',
    text: '重要预警',
    tagBgc: '#FFE7E6',
    color: '#FE6F6D'
  },
  second: {
    icon: 'warn-second',
    text: '次要预警',
    tagBgc: '#FFEFD6',
    color: '#FEB649'
  },
  general: {
    icon: 'warn-general',
    text: '一般预警',
    tagBgc: '#F5F6F7',
    color: '#5A636E'
  }
}[props.level]))

</script>

<template>
  <view class="warn-card-container" :class="[`warn-card-container__${props.level}`]">
    <tag :styles="{ backgroundColor: currWarn.tagBgc, color: currWarn.color }" :icon="currWarn.icon">{{ currWarn.text }}</tag>
    <view class="warn-title">{{ props.warnTitle }}</view>
    <view class="warn-message">{{ props.warnMessage }}</view>
    <button-x size="small" class="button-x" type="simple" :styles="{ color: currWarn.color }" @click="($event) => emit('btnClick', $event)">预警处理</button-x>
  </view>
</template>

<style scoped lang="scss">
  .warn-card-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32rpx;
    border-radius: 32rpx;
    overflow: hidden;
  }
  .warn-card-container__warn {
    background-color: $kaoyan-color-3;
  }
  .warn-card-container__second {
    background-color: #FAAE3A;
  }
  .warn-card-container__general {
    background-color: $kaoyan-color-10;
  }
  .warn-title,
  .warn-message {
    color: $kaoyan-color-14;
  }
  .warn-title {
    margin-top: 16rpx;
    @include fs36w600($kaoyan-color-14);
  }
  .warn-message {
    margin-top: 8rpx;
    margin-bottom: 16rpx;
    @include fs32w400($kaoyan-color-14);
  }
  .button-x {
    display: block;
    width: 100%;
  }

</style>
